@mixin wave($bg: #2196f3, $duration: 2s) {
  $w1: radial-gradient(100% 57% at top, transparent 100%, $bg 100.5%) no-repeat;
  $w2: radial-gradient(100% 57% at bottom, $bg 100%, transparent 100.5%)
    no-repeat;
  background: $w1, $w2, $w1, $w2;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  background-position-x: -200%, -100%, 1%, 100%;
  animation: waveMove $duration linear infinite;
  @at-root {
    @keyframes waveMove {
      0% {
        background-position-x: -200%, -100%, 1%, 100%;
      }
      100% {
        background-position-x: 1%, 100%, 200%, 300%;
      }
    }
  }
}

@mixin waveFont($bg: #2196f3, $duration: 2s, $fsz: 100px) {
  @include wave($bg, $duration);
  font-size: $fsz;
  font-weight: bold;
  color: transparent;
  background-clip: text;
  -webkit-text-stroke: 2px $bg;
}
